<template>
  <div class="class_add">
      <div class="addd">
          <a-tabs default-active-key="1" >
            <a-tab-pane key="1" tab="添加课程">
                <a-form-model :model="form1" :label-col="labelCol" :wrapper-col="wrapperCol" style="overflow-y: scroll;height: 463px;">
                    <a-form-model-item label="选择部门">
                    <!-- <a-select v-model="form1.department" placeholder="please select your zone" v-for="(item1,index1) in depart" :key="item1+index1">
                        <a-select-option value="item1" >
                        {{item1}}
                        </a-select-option>
                    </a-select> -->
                    <select v-model="form1.department_name" @change="choosedepart" style="width: 100%;height: 35px;border: 1px solid gainsboro;border-radius: 6px;">
                        <option :value="item"  v-for="item in depart" :key="item">{{item}}</option>
                    </select>
                    </a-form-model-item>
                    <a-form-model-item label="课程名称">
                        <a-input v-model="form1.name" />
                    </a-form-model-item>
                    <a-form-model-item label="课程简介">
                        <a-input v-model="form1.desc" />
                    </a-form-model-item>
                    <a-form-model-item label="视频缩略图">
                        <input type="file" @change="uploadImg" accept="image/*" />
                    </a-form-model-item>
                    <a-form-model-item label="图文详情">
                        <div  ref="editorElem" style="text-align:left;" class="edito"></div>
                    </a-form-model-item>
                    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                        <a-button type="primary" @click="submitlesson">
                            提交
                        </a-button>
                    </a-form-model-item>
                </a-form-model>
            </a-tab-pane>
            <a-tab-pane key="2" tab="课程阶段" force-render>
                <a-form-model :model="form2" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-form-model-item label="选择课程">
                    <!-- <a-select v-model="form2.course" placeholder="please select your zone">
                        <a-select-option value="item2" v-for="(item2,index) in allclassdata" :key="item2+index+2">
                        {{item2}}
                        </a-select-option>
                    </a-select> -->
                    <select v-model="form2.course_name" style="width: 100%;height: 35px;border: 1px solid gainsboro;border-radius: 6px;">
                        <option :value="item1"  v-for="item1 in allclassdata" :key="item1">{{item1}}</option>
                    </select>
                    </a-form-model-item>
                    <a-form-model-item label="阶段名称">
                        <a-input v-model="form2.name" />
                    </a-form-model-item>
                    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                        <a-button type="primary" @click="submittopic">
                            提交
                        </a-button>
                    </a-form-model-item>
                </a-form-model>
            </a-tab-pane>
            <a-tab-pane key="3" tab="阶段视频">
                <a-form-model :model="form3" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-form-model-item label="选择课程">
                    <!-- <a-select @change="getalltopic" v-model="form3.course_name" placeholder="please select your zone">
                        <a-select-option value="item3" v-for="(item3,index) in allclassdata" :key="item3+index+20">
                        {{item3}}
                        </a-select-option>
                    </a-select> -->
                    <select v-model="form3.course_name" @change="getalltopic" style="width: 100%;height: 35px;border: 1px solid gainsboro;border-radius: 6px;">
                        <option :value="item2"  v-for="item2 in allclassdata" :key="item2">{{item2}}</option>
                    </select>
                    </a-form-model-item>
                    <a-form-model-item label="选择阶段">
                    <!-- <a-select v-model="form3.stagename" placeholder="please select your zone">
                        <a-select-option value="item4" v-for="(item4,index) in alltopic" :key="item4+index+30">
                        {{item4}}
                        </a-select-option>
                    </a-select> -->
                    <select v-model="form3.lesson_name" style="width: 100%;height: 35px;border: 1px solid gainsboro;border-radius: 6px;">
                        <option :value="item3"  v-for="item3 in alltopic" :key="item3">{{item3}}</option>
                    </select>
                    </a-form-model-item>
                    <a-form-model-item label="视频名称">
                        <a-input v-model="form3.name" />
                    </a-form-model-item>
                     <a-form-model-item label="上传视频">
                        <input type="file" @change="uploadvideo" />
                    </a-form-model-item>
                    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                        <a-button type="primary" @click="submitvideo">
                            提交
                        </a-button>
                    </a-form-model-item>
                </a-form-model>
            </a-tab-pane>
           </a-tabs>
      </div>
  </div>
</template>

<script>
var Authorization = `JWT ${localStorage.getItem('sessionId')}`
import E from "wangeditor";
import axios from '../../utils/axios'
import {getalllessonData,getallclassData,getdepartmentData} from '../../api/usercenter'
export default {
    data() {
        return {
            myheader:Authorization,
            loading: false,
            imageUrl: '',
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
            form1: {
                department_name: '',
                name: '',
                desc:'',
                detail:'',
                image_url:''
            },
            form2: {
                course_name: '',
                name: '',
            },
            form3: {
                course_name: '',
                lesson_name: '',
                name: '',
                video_url:''
            },
            editor: null,
            editorContent: '',
            image:{},
            video:{},
            depart:[],
            allclassdata:[],
            alltopic:[]
        }
    },
    created(){
        getdepartmentData().then(res=>{
            this.depart = res
        })
        getallclassData().then(res=>{
            this.allclassdata = res
        })
    },
    mounted(){
        this.edi()
    },
    props: ['catchData'],
    methods:{
        uploadImg(e){
            let file = e.target.files[0];
            this.image = new FormData();//创建 formdata对象
            this.image.append('course_image',file);
            axios.post('/trains/upload/',this.image).then(res=>{
                let akaka= res.course_image
                this.form1.image_url = akaka.split('resource/')[1]
                this.$message.success('上传成功')
            })
        },
        uploadvideo(e){
            let file = e.target.files[0];
            this.video = new FormData();//创建 formdata对象
            this.video.append('video',file);
            axios.post('/trains/upload/',this.video).then(res=>{
                let akaka= res.video
                this.form3.video_url = akaka.split('resource/')[1]
                this.$message.success('上传成功')
            })
        },
        choosedepart(e){
        },
        getalltopic(e){
            let course_name = e.target.value
            getalllessonData(course_name).then(res=>{
                this.alltopic = res
            })
        },
        submitlesson(){
            this.form1.detail = this.editorContent
            axios.post('/trains/create_courses/',this.form1).then(res=>{
                this.$message.success('提交成功')
                getallclassData().then(res=>{
                    this.allclassdata = res
                })
            })
            .catch(err=>{
                this.$message.error('课程名重复，提交失败')
            })
        },
        submittopic(){
            axios.post('/trains/create_lesson/',this.form2).then(res=>{
                this.$message.success('提交成功')
                getalllessonData(this.form2.course_name).then(res=>{
                    this.alltopic = res
                })
            })
        },
        submitvideo(){
            axios.post('/trains/create_video/',this.form3).then(res=>{
                this.$message.success('提交成功')
                location.reload()
            })
        },
        edi(){
            this.editor = new E(this.$refs.editorElem);
            // 编辑器的事件，每次改变会获取其html内容
            this.editor.customConfig.onchange = html => {
            this.editorContent = html;
            this.catchData(this.editorContent); // 把这个html通过catchData的方法传入父组件
            };
            this.editor.customConfig.menus = [
            // 菜单配置
            'head', // 标题
            'bold', // 粗体
            'fontSize', // 字号
            'fontName', // 字体
            'italic', // 斜体
            'underline', // 下划线
            'strikeThrough', // 删除线
            'foreColor', // 文字颜色
            'link', // 插入链接
            'list', // 列表
            'justify', // 对齐方式
            'quote', // 引用
            'image', // 插入图片
            ];
            this.editor.customConfig.uploadImgShowBase64 = true
            this.editor.create(); // 创建富文本实例
        }
    },
}
</script>

<style lang='less'>
.class_add{
    .addd{
        .w-e-text-container{
            height: 205px!important;
        }
    }
}
</style>